<template>
  <div style="flex: 1; position: relative">
    <div ref="container" class="bm-view"></div>
    <div class="drawing-panel">
      <el-button @click="pauseAni">暂停</el-button>
      <el-button @click="continueAni">继续</el-button>
      <el-button v-if="$listeners.replay" @click="$emit('replay')"
        >重播</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  props: {
    path: {
      type: Array,
      default() {
        return [
          { lng: 116.297611, lat: 40.047363 },
          { lng: 116.302839, lat: 40.048219 },
          { lng: 116.308301, lat: 40.050566 },
          { lng: 116.305732, lat: 40.054957 },
          { lng: 116.304754, lat: 40.057953 },
          { lng: 116.306487, lat: 40.058312 },
          { lng: 116.307223, lat: 40.056379 },
        ]
      },
    },
  },
  data() {
    return {
      bmap: null,
      trackAni: null,
    }
  },
  mounted() {
    this.bmap = new BMapGL.Map(this.$refs.container)
    this.bmap.centerAndZoom(new BMapGL.Point(116.297611, 40.047363), 17)
    this.bmap.enableScrollWheelZoom(true)
    this.generateTrackAnimation()
    setTimeout(this.start, 1e3)
  },
  destroyed() {
    this.pauseAni()
    this.bmap = null
    this.trackAni = null
    this.$el.remove()
  },
  methods: {
    generateTrackAnimation() {
      const point = this.path.map((val) => new BMapGL.Point(val.lng, val.lat))
      const pl = new BMapGL.Polyline(point)
      this.trackAni = new BMapGLLib.TrackAnimation(this.bmap, pl, {
        overallView: true,
        tilt: 0,
        duration: 20000,
        delay: 300,
      })
    },
    start() {
      this.trackAni.start()
    },
    pauseAni() {
      this.trackAni.pause()
    },
    continueAni() {
      this.trackAni.continue()
    },
  },
}
</script>

<style scoped>
.bm-view {
  width: 100%;
  height: calc(100vh - 110px);
  height: 100%;
}
.drawing-panel {
  z-index: 999;
  position: absolute;
  bottom: 3.5rem;
  margin-left: 3rem;
  padding: 1rem 1rem;
  border-radius: 0.25rem;
  background-color: #fff;
  box-shadow: 0 2px 6px 0 rgb(27 142 236 / 50%);
}
</style>
